<template>
  <!-- 系统功能-定时任务 -->
  <div class="app-container">
    <div class="mainbox">
      <!-- 顶部操作 -->
      <div class="filter-container">
        <el-form ref="filterFormRef" :model="filterForm" label-width="74px"
                 :inline="true" @submit.native.prevent>
          <el-form-item label="主题名称" prop="themeName">
            <el-input v-model.trim="filterForm.themeName" maxlength="30" clearable
                      placeholder="请输入内容" class="filter-item" @keyup.enter.native="handleFilter" />
          </el-form-item>
        </el-form>
        <div class="flex-1" />
        <el-button class="filter-item" type="primary" @click="handleFilter">  搜索</el-button>
        <el-button @click="handleReset">重置</el-button>
      </div>
      <!-- 表格 -->
      <div class="table-container table-fullscreen">
        <div class="table-opt-container">
          <el-button v-permission="['THEME_MANAGE_ADD_BUTTON']" type="primary" class="filter-item"
                     icon="el-icon-plus" @click="addTheme"> 新增</el-button>
          <div class="flex-1" />
          <dt-dialog-column :columns="columns" @queryTable="getList" />
        </div>
        <el-table
          ref="table"
          v-loading="listLoading"
          :data="themeList"
          highlight-current-row
          style="width: 100%;"
          :header-cell-style="headerCellStyle"
          border
          @sort-change="sortChange"
        >
          <template slot="empty">
            <p>{{ $store.getters.dataText }}</p>
          </template>
          <el-table-column
            fixed="left"
            type="index"
            label="序号"
            width="70"
            :index="table_index"
          />
          <el-table-column
            v-if="columns[0].show"
            align="center"
            prop="themeName"
            label="主题名称"
            show-overflow-tooltip
          />
          <el-table-column
            v-if="columns[1].show"
            align="center"
            prop="remark"
            label="备注"
            show-overflow-tooltip
          />
          <el-table-column
            v-if="columns[2].show"
            align="center"
            prop="createUserName"
            label="创建人"
          />
          <el-table-column
            v-if="columns[3].show"
            align="center"
            prop="createTime"
            label="创建时间"
          />
          <el-table-column
            v-if="columns[4].show"
            align="center"
            prop="updateTime"
            label="修改时间"
          />
          <el-table-column
            v-if="columns[5].show"
            key="statusFlag"
            prop="statusFlag"
            align="center"
            class-name="status-col"
            label="主题状态"
            fixed="right"
          >
            <template slot-scope="{ row}">
              <el-switch
                :value="row.statusFlag"
                :active-value="1"
                :inactive-value="2"
                @change="statusChange($event,row)"
              />
            </template>
          </el-table-column>
          <el-table-column
            :key="Math.random()"
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
            fixed="right"
            width="228"
          >
            <template slot-scope="{ row }">
              <el-button
                v-permission="['THEME_MANAGE_UPDATE_BUTTON']"
                size="mini"
                style="padding: 7px"
                @click="updateTheme(row)"
              >
                修改
              </el-button>
              <el-button
                v-permission="['THEME_MANAGE_DEL_BUTTON']"
                type="danger"
                size="mini"
                style="padding: 7px"
                :disabled="row.statusFlag==1"
                title="确定删除吗？"
                @click="deleteTheme(row)"
              >
                删除
              </el-button>
              <el-button
                v-permission="['THEME_MANAGE_THEMECONFIG_BUTTON']"
                size="mini"
                style="padding: 7px"
                @click="handleThemeConfig(row)"
              >
                主题配置
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <dt-pagination
          v-show="total > 0"
          :total="total"
          :page.sync="filterForm.pageNo"
          :limit.sync="filterForm.pageSize"
          @pagination="getList"
        />
      </div>
      <!-- 新增、修改主题 -->
      <ThemeEdit ref="ThemeEditRef" />
      <!-- 主题配置 -->
      <ThemeConfig ref="ThemeConfigRef" />
    </div>
  </div>
</template>
<script>
import themeApi from '@/framework/api/themeManage'
import dialogColumn from '@/framework/utils/mixins/dialogColumn'
import ThemeEdit from './components/themeManageEdit.vue'
import ThemeConfig from './components/themeManageConfig.vue'

export default {
  name: 'ThemeManage',
  components: {
    ThemeEdit,
    ThemeConfig
  },
  mixins: [dialogColumn],
  data() {
    return {
      filterForm: {
        pageNo: 1,
        pageSize: 10,
        themeName: ''
      },
      total: 0,
      themeList: [],
      listLoading: true,
      headerCellStyle: {
        backgroundColor: '#f2f2f2'
      },
      themeListLength: 0,
      // 列信息
      columns: [
        { prop: 'themeName', label: '主题名称', show: true },
        { prop: 'remark', label: '备注', show: true },
        { prop: 'createUserName', label: '创建人', show: true },
        { prop: 'createTime', label: '创建时间', show: true },
        { prop: 'updateTime', label: '修改时间', show: true },
        { prop: 'statusFlag', label: '主题状态', show: true }
      ]
    }
  },
  created() {
    this.handleFilter()
  },
  methods: {
    handleThemeConfig(row) {
      this.$refs.ThemeConfigRef.handleThemeConfig(row)
    },
    handleReset() {
      this.$refs.filterFormRef.resetFields()
      this.handleFilter()
    },
    sortChange(data) {
    },
    handleFilter() {
      this.filterForm.pageNo = 1
      this.getList()
    },
    getList() {
      this.listLoading = true
      themeApi.pageList(this.filterForm).then((res) => {
        this.themeList = res.data.rows
        this.themeListLength = res.data.rows.length
        this.total = res.data.totalRows
        this.listLoading = false
      })
    },
    statusChange(v, row) {
      const params = {
        themeId: row.themeId,
        statusFlag: v
      }
      themeApi.updateStatus(params).then((res) => {
        this.getList()
        this.$dtMessage({
          title: '成功',
          message: '更新成功',
          type: 'success',
          duration: 2000
        })
        this.$store.dispatch('settings/getCurrentThemeInfo')
      })
    },
    addTheme() {
      this.$refs.ThemeEditRef.handleTheme('', 'create')
    },
    updateTheme(row) {
      this.$refs.ThemeEditRef.handleTheme(row, 'update')
    },
    deleteTheme(row) {
      this.$dtMessageBox({ title: '提示', message: `确认要删除"${row.themeName}"主题吗？`, type: 'warning' }).then(() => {
        themeApi.delete({ themeId: row.themeId }).then((res) => {
          this.getList()
          this.$dtMessage({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          })
        })
      }).catch(() => {
      })
    },
    table_index(index) {
      return (this.filterForm.pageNo - 1) * this.filterForm.pageSize + index + 1
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
